<!-- ignore the following lines, they are not important to this demo -->
<jigsaw-demo-description [summary]="summary" [content]="description">
</jigsaw-demo-description>


<!-- start to learn the demo from here -->
<div class="live-demo-wrap">
    <h2>Drawer with DIV</h2>
    <div class="demo-1 live-demo">
        <p class="comment">
            1、<code>container</code>属性可以支持'.className'、'#id'、'[attr]'、'tagName'，向上寻找离抽屉最近的。<br>
            2、<code>position</code>为left或者right时，只有<code>offsetTop</code>和<code>offsetBottom</code>能生效；
            为top或者bottom时，只有<code>offsetLeft</code>和<code>offsetRight</code>能生效。<br>
            3、<code>width</code>属性设置为'auto'，并且<code>offsetLeft</code>属性或者<code>offsetRight</code>属性设置有值，<br>
            例如设置为30px，则在抽屉内部，自动会将<code>width</code>属性的值转为calc(100% - 30px)，如果<code>offsetLeft</code><br>
            和<code>offsetRight</code>属性的值均没有设置，则<code>width</code>属性当做没有设置处理。对于<code>height</code>属性<br>
            设置为'auto'的时候，配合<code>offsetTop</code>与<code>offsetBottom</code>属性值的设置也做类似处理
        </p>
        <div class="size-box">
            宽度：<j-input width="200" [(value)]="width"></j-input>
            高度：<j-input width="200" [(value)]="height"></j-input>
        </div>
        <div class="position-box">
            <label>抽屉位置：</label>
            <jigsaw-radios [(value)]="selectedPosition">
                <jigsaw-radio-option value="left">left</jigsaw-radio-option>
                <jigsaw-radio-option value="right">right</jigsaw-radio-option>
                <jigsaw-radio-option value="top">top</jigsaw-radio-option>
                <jigsaw-radio-option value="bottom">bottom</jigsaw-radio-option>
            </jigsaw-radios>
        </div>
        <div class="offset-box">
            offsetLeft：<j-input [(value)]="offsetLeft"></j-input>
            offsetTop：<j-input [(value)]="offsetTop"></j-input>
            offsetRight：<j-input [(value)]="offsetRight"></j-input>
            offsetBottom：<j-input [(value)]="offsetBottom"></j-input>
        </div>
        <div class="custom-container">
            <j-drawer container=".custom-container" [position]="selectedPosition" [width]="width" [height]="height"
                      [offsetLeft]="offsetLeft" [offsetTop]="offsetTop" [offsetRight]="offsetRight" [offsetBottom]="offsetBottom">
                <div class="drawer-content">
                    这是一个展示内容的box
                </div>
            </j-drawer>
        </div>
    </div>
</div>





